<template>
  <view id="app">
    <view class="container" v-for="(itemObj, titleName) in showDataArray">
      <view class="title" v-for="item in indexNameArray">
        <view v-if="item.enName == titleName">{{ item.chName }}</view>
      </view>

      <view class="item" v-for="(value, index) in itemObj">
        <view class="item-name"> 设备序号： </view>
        <view class="item-value">{{ value.id }} </view>
        <view class="item-name"> 设备状态： </view>
        <view :class="value.class"> {{ value.status }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: {
        client: "60:1D:9D:F3:B7:E9",
        code: "200",
        data: {
          tank: [
            {
              status: 3,
              id: 1,
            },
            {
              status: 1,
              id: 2,
            },
          ],
          pipeline: [
            {
              status: 0,
              id: 1,
            },
            {
              status: 1,
              id: 2,
            },
          ],
          peoplewell: [
            {
              status: 0,
              id: 1,
            },
            {
              status: 1,
              id: 2,
            },
          ],
          lowGroove: [
            {
              status: 0,
              id: 1,
            },
            {
              status: 1,
              id: 2,
            },
          ],
        },
      },
      showDataArray: {},
      indexNameArray: [
        { enName: "tank", chName: "油罐" },
        { enName: "pipeline", chName: "管线" },
        { enName: "peoplewell", chName: "人井" },
        { enName: "lowGroove", chName: "底槽" },
      ],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.showDataArray = JSON.parse(JSON.stringify(this.dataList.data));
      for (const key in this.showDataArray) {
        for (const iterator of this.showDataArray[key]) {
          this.dealWithArray(iterator);
        }
      }
    },
    /* 把数据处理成需要的格式 */
    dealWithArray(iterator) {
      switch (iterator.status) {
        case 0:
          iterator.status = "⽆效";
          iterator.class = "item-value item-value-invalid";
          break;
        case 1:
          iterator.status = "正常";
          iterator.class = "item-value item-value-normal";
          break;
        case 2:
          iterator.status = "报警";
          iterator.class = "item-value item-value-alarm";
          break;
        case 3:
          iterator.status = "油报警";
          iterator.class = "item-value item-value-alarm";
          break;
        case 4:
          iterator.status = "⽔报警";
          iterator.class = "item-value item-value-alarm";
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
#app {
  color: white;
}
.container {
  margin: 10rpx;
  padding: 10rpx;
  background-color: #525b62;
}
.title {
  font-size: larger;
  font-weight: bolder;
  text-align: center;
  margin: 10rpx 0;
}
.item {
  border: 1rpx solid white;
  margin: 10rpx;
  text-align: center;
}
.item view {
  display: inline-block;
  padding: 10rpx;
}
.item-name {
  width: 25%;
  text-align: right;
}
.item-value {
  width: 15%;
  text-align: left;
}
.item-value-invalid {
  color: rgb(250, 247, 98);
}
.item-value-alarm {
  color: rgb(255, 0, 0);
}
.item-value-normal {
  color: rgb(6, 247, 6);
}
</style>
